<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>

<!--第一次调用组件-->
<div id="app">
    <model1></model1>
</div>

<!--第二次调用组件-->
<div id="app1">
<!--    这个标签就是自定义组件的名称-->
    <model1></model1>
</div>

<script type="text/javascript">
    //封装全局组件，model1是自定义的组件名称，全局组件注册后可以被重复使用
    Vue.component("model1",{
        //模板，定义组件的html内容
        template:"<div><h1>{{title}}</h1><button type='button' @click='ddfn'>点死我</button></div>",
        //数据
        data:function () {
            return{
                title:"hello Vue组件"
            }
        },
        //方法函数
        methods:{
            ddfn:function () {
                this.title="点不死，那就使劲点";
            }
        }
    });

//创建vue对象，绑定id叫做app的元素内容
    //绑定vue对象后组件才可以使用
    new Vue({
       el:"#app"
    });

    //创建vue对象，绑定id叫做app的元素内容
    //绑定vue对象后组件才可以使用
    new Vue({
        el:"#app1"
    });
</script>
</body>
</html>